<template>  
  <div class="task-monitor">  
    <!-- 标题部分 -->  
    <div class="header">  
      <div class="title">点检任务</div>  
      <div class="status"></div>  
    </div>  

    <!-- 数据部分 -->  
    <div class="content">  
      <div class="data-item">  
        <div class="icon-container">  
          <img class="data-icon" src="@/assets/images/images/icon.png" alt="正常任务" />  
        </div>  
        <div class="info">  
          <div class="value">32531</div>  
          <div class="label">正常任务</div>  
        </div>  
      </div>  
      <div class="data-item">  
        <div class="icon-container">  
          <img class="data-icon" src="@/assets/images/images/icon.png" alt="未检任务" />  
        </div>  
        <div class="info">  
          <div class="value">13325</div>  
          <div class="label">未检任务</div>  
        </div>  
      </div>  
      <div class="data-item">  
        <div class="icon-container">  
          <img class="data-icon" src="@/assets/images/images/icon.png" alt="异常任务" />  
        </div>  
        <div class="info">  
          <div class="value">62255</div>  
          <div class="label">异常任务</div>  
        </div>  
      </div>  
      <div class="data-item">  
        <div class="icon-container">  
          <img class="data-icon" src="@/assets/images/images/icon.png" alt="停机任务" />  
        </div>  
        <div class="info">  
          <div class="value">72123</div>  
          <div class="label">停机任务</div>  
        </div>  
      </div>  
    </div>  
  </div>  
</template>  

<script>  
export default {  
  name: "TaskMonitor",  
  data() {  
    return {  
      containerWidth: 430, // 默认容器宽度值 (初始固定值)  
    };  
  },  
  mounted() {  
    // 当 DOM 渲染完成时初始化内容  
    this.$nextTick(() => {  
      this.updateContainerWidth(); // 初始化宽度  
      window.addEventListener("resize", this.handleResize); // 添加窗口监听器  
    });  
  },  
  beforeDestroy() {  
    // 组件销毁时，清除事件监听  
    window.removeEventListener("resize", this.handleResize);  
  },  
  methods: {  
    // 初始化任务容器相关内容  
    initChart() {  
      console.log("这里可以加入图表或自定义的其他组件，例如 ECharts 配置");  
    },  

    // 窗口大小变化时更新宽度  
    handleResize() {  
      this.updateContainerWidth(); // 调整宽度  
    },  

    // 动态计算容器宽度的方法  
    updateContainerWidth() {  
      const taskMonitor = this.$el; // 获取组件根元素  
      if (taskMonitor) {  
        this.containerWidth = taskMonitor.offsetWidth || 430; // 更新宽度值，默认430  
        console.log("容器宽度实时更新为:", this.containerWidth);  
        // 如果有依赖宽度的图表初始化逻辑，例如 ECharts 图表，请在这里调用：  
        this.initChart();  
      }  
    },  
  },  
};  
</script>  

<style scoped>  
/* 主容器样式 */  
.task-monitor {  
  width: 100%; /* 支持响应式 */  
  max-width: 600px; /* 限制最大宽度 */  
  padding: 20px;  
  border-radius: 12px;  
  background: rgba(10, 20, 40, 0.9); /* 深蓝色透明背景 */  
  border: 1px solid rgba(0, 255, 255, 0.6); /* 半透明青色边框 */  
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), inset 0 0 8px rgba(0, 255, 255, 0.2); /* 光影效果 */  
  font-family: Arial, sans-serif;  
  color: #fff;  
}  

/* 标题样式 */  
.header {  
  display: flex;  
  align-items: center;  
  margin-bottom: 20px;  
  justify-content: space-between;  
}  

.title {  
  flex-grow: 1;  
  font-size: 18px;  
  font-weight: bold;  
  color: #00b7ff; /* 浅蓝标题文字 */  
}  

.status {  
  width: 80px;  
  height: 5px;  
  background: repeating-linear-gradient(  
    90deg,  
    rgba(0, 183, 255, 0.5) 0,  
    rgba(0, 183, 255, 0.5) 5px,  
    transparent 5px,  
    transparent 10px  
  );  
  border-radius: 3px;  
}  

/* 数据部分样式 */  
.content {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 自动适应列数 */  
  gap: 20px; /* 间距 */  
}  

.data-item {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
  background: rgba(0, 183, 255, 0.1); /* 半透明背景块 */  
  border-radius: 10px;  
  padding: 15px;  
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);  
}  

/* 图标容器样式 */  
.icon-container {  
  width: 60px;  
  height: 60px;  
  position: relative;  
  margin-right: 20px;  
}  

.data-icon {  
  width: 100%;  
  height: 100%;  
  border-radius: 50%;  
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5), inset 0 0 10px rgba(0, 255, 255, 0.3);  
}  

/* 信息部分样式 */  
.info {  
  text-align: left;  
}  

.value {  
  font-size: 24px;  
  font-weight: bold;  
  color: #00ffff; /* 青色数值 */  
}  

.label {  
  font-size: 14px;  
  color: rgba(255, 255, 255, 0.7); /* 半透明任务类型说明 */  
}  
</style>